<template>
    <div>
        <OverCounterFundForm
            v-if="oderDirection != 'E'"
            :key="renderCountKey"
            :stockInfoCache="outStockInfoCache"
            :detail="detail"
            @handleSettingValue="handleSettingValue1(arguments, '111')"
            @getStockInfo="getStockInfo(arguments)"
        />
        <FundTransferForm
            v-else-if="oderDirection == 'E'"
            :key="renderCountKey"
            :detail="detail"
            :notMesh="false"
            :outStockInfo="outStockInfo"
            :intoStockInfo="inStockInfoCache"
            @handleSettingValue="handleSettingValue2(arguments, '222')"
            @getStockInfo="getStockInfo(arguments)"
            @getIntoStockInfo="getIntoStockInfo(arguments)"
        />
    </div>
</template>
<script lang="ts">
import OverCounterFundForm from '../components/cwOpenOrder/over-count-fund-form.vue';
import FundTransferForm from '../components/cwOpenOrder/fund-transfer-form.vue';
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';

@Component({
    name: 'OverCounterFundOrder',
    components: {
        OverCounterFundForm,
        FundTransferForm,
    },
})

// 场外基金指令
export default class CWOpenForm extends Vue {
    @Prop()
    detail: any;
    @Prop()
    inStockInfoCache: any;
    @Prop()
    outStockInfoCache: any;
    oderDirection: string = '';
    instructionCache: any = {};
    renderCountKey: number = 0;

    stockInfo: any = {};
    outStockInfo: any = {};
    intoStockInfo: any = {};

    transferDetail: any = {}; // 基金转换表单
    cwDetail: any = {}; // 场外开基表单

    @Watch('detail', { immediate: true, deep: true })
    onWatchDetail() {
        console.log(this.detail, '场外开基');
        if (this.detail) {
            if (this.oderDirection !== this.detail?.orderDirection) {
                this.oderDirection = this.detail?.orderDirection;
                this.renderCountKey++;
            }
        }
    }

    @Watch('outStockInfoCache', { immediate: true, deep: true })
    onWatchOutStockInfoCache() {
        if (this.oderDirection === 'E') {
            this.outStockInfo = this.outStockInfoCache;
        }
    }

    // @Watch('oderDirection', { immediate: true, deep: true })
    // onWatchOderDirection(newValue, oldValue) {
    //     // console.log(this.detail);
    //     if (JSON.stringify(newValue) !== JSON.stringify(oldValue)) {
    //         // this.oderDirection = this.detail?.orderDirection;
    //         this.instructionCache = {};
    //         this.transferDetail = {};
    //     }
    // }

    // 指令事件回调
    handleSettingValue1(msg: any, type: string) {
        // this.instructionCache = {};
        // this.instructionCache = JSON.parse(JSON.stringify(msg[0]));
        if (this.oderDirection !== 'E') {
            console.log(msg[0], type, 'handleSettingValue1');
            // this.oderDirection = this.instructionCache.orderDirection;
            this.$emit('handleSettingValue', msg[0], '8');
        }
    }

    // 指令事件回调
    handleSettingValue2(msg: any, type: string) {
        if (this.oderDirection === 'E') {
            console.log(msg[0], type, 'handleSettingValue2');
            // this.oderDirection = this.instructionCache.orderDirection;
            this.$emit('handleSettingValue', msg[0], '8');
        }

        // this.instructionCache = {};
        // this.instructionCache = JSON.parse(JSON.stringify(msg[0]));
        // this.oderDirection = this.instructionCache.orderDirection;
        // this.$emit('handleSettingValue', msg[0], '8');
    }

    getStockInfo(args: any) {
        this.stockInfo = args[0];
        this.$emit('getStockInfo', this.stockInfo, '8');
    }

    getIntoStockInfo(args: any) {
        this.intoStockInfo = args[0] || {};
        this.$emit('getIntoStockInfo', this.intoStockInfo);
    }
}
</script>
